<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style>
   *{
       margin:0;
       padding:0;
   }
   .main div{
       float: left;
   }
   .left{
       width:100px;
       background: #ff0000;
       margin-left: -100%;
   }
   .right{
       width:100px;
       background: #ff00ff;
       margin-left: -100px;
   }
   .content{
       width:100%;
       background: #fffc00;
   }
   .item{
       padding-left: 100px;
   }
    </style>
</head>

<body>
    <div class="main">
        <div class="content">
            <div class="item">中间</div>
        </div>
        <div class="left">左</div>
        <div class="right">右</div>

    </div>
    <!-- 双飞翼布局
3栏布局
 左右是固定300px宽度
中间自适应
dom优先加载中间内容

思路：
div都浮动，按理来说三个都在一行，中间的宽度是100%，所以左和右下来了，需要给左边设置-100%，然后给右边设置-100px，就是他的宽度100px
-->
</body>

</html>